<template>
  <div class="header">
    <van-icon name="arrow-left" @click="skipHome" />
    <p>搜索</p>
    <van-icon name="wap-home" @click="skipHome" />
  </div>
  <div class="banner">
    <div class="bn-left">
      <img
        src="https://p1.meituan.net/travelcube/86c5b686264c3cda292c30f623970f955983.png"
      />
      <div class="bn-text">
        <p>省钱利器&ensp;购物超划算</p>
        <span>吃喝玩乐尽在美团</span>
      </div>
    </div>
    <button>去APP</button>
  </div>
  <div class="main">
    <van-search v-model="keyword" show-action placeholder="请输入搜索关键词">
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>
  </div>
  <ul class="content">
    <li v-for="item in dataList" :key="item">
      <a v-for="list in item" :key="list" @click="goDetail(list)">
        <van-icon name="search" />
        <span>{{ list.title }}</span>
      </a>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

let keyword = ref('')
let dataList = ref('')
const store = useStore()
const router = useRouter()
function skipHome() {
  router.push({ name: 'home' })
}
function goDetail(item) {
  store.commit('homeData/changeDetail', item)
  router.push({ name: 'detail', params: { id: item.id } })
}
function onClickButton() {
  axios({
    url: 'http://localhost:5000/Home',
    method: 'get'
  }).then((res) => {
    console.log(res)
    dataList.value = res.data
  })
}
</script>

<style lang="scss" scoped>
.header {
  height: 0.5rem;
  background: #ffcc00;
  padding: 0 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;
  .van-icon {
    width: 0.3rem;
    font-size: 0.3rem;
  }
  p {
    font-weight: 600;
    font-size: 0.16rem;
  }
}
.banner {
  height: 0.5rem;
  background: #000000;
  padding: 0 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  button {
    height: 0.3rem;
    width: 0.5rem;
    background: #ffcc00;
    border-radius: 0.1rem;
    font-size: 0.12rem;
    border: none;
    color: #000;
  }
  .bn-left {
    height: 100%;
    display: flex;
    align-items: center;
    img {
      height: 0.4rem;
      width: 0.4rem;
    }
    .bn-text {
      display: flex;
      margin-left: 0.1rem;
      flex-direction: column;
      p {
        font-size: 0.14rem;
        line-height: 0.24rem;
        margin: 0;
      }
      span {
        font-size: 0.1rem;
      }
    }
  }
}
.main {
  height: 0.5rem;
  background: #f0efed;
  padding: 0 0.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  margin: 0.1rem 0;
  .van-search {
    width: 100%;
    height: 0.3rem;
    padding: 0;
    font-size: 0.1rem;
    border-radius: 0.3rem;
    background: #ffffff;
    overflow: hidden;
  }
}
.content {
  background: #f0efed;
  display: flex;
  flex-direction: column;
  li {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.15rem;
    display: flex;
    flex-direction: column;
    a {
      height: 0.4rem;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      line-height: 0.4rem;
      color: #000;
      .van-icon {
        font-size: 0.24rem;
        margin-right: 0.2rem;
      }
    }
  }
}
</style>
